<!--归档范围和保管期限-->
<template>
  <div class="save-file">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-baoguanxiangicon" />
        </div>
        <span>归档范围和保管期限</span>
      </div>
      <div slot="extra">
        <a-cascader :options="options1" placeholder="全宗选择" class="icon-button" />
        <a-cascader :options="options2" placeholder="门类选择" class="icon-button" />
        <a-button type="primary" icon="plus" class="icon-button" @click="clickButton('add')">一级新增</a-button>
        <a-button type="primary" icon="plus" @click="clickButton('addChild')">子级新增</a-button>
      </div>

      <!-- 归档范围和保管期限表格 -->
      <el-table
        :data="saveTableData"
        highlight-current-row
        border
        height="100%"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
        style="width: 100%">
        <slot v-for="(item,index) in saveColumns">
          <el-table-column
            :key="index"
            :property="item.field"
            :label="item.title"
            :width="item.width"
            show-overflow-tooltip
            sortable>
          </el-table-column>
        </slot>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="clickButton('edit', scope.row)">编辑</a>
            <a-divider type="vertical" />
            <a @click="clickButton('del', scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </a-card>

    <!-- 归档范围和保管期限弹出框 -->
    <a-modal
      :title="modalTitle"
      :maskClosable="false"
      v-model="dialogFormVisible">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="[ 'FS_Order', {rules: [{ required: true, message: '请输入顺序号' }]} ]" />
        </a-form-item>
        <a-form-item label="归档范围">
          <a-input v-decorator="[ 'FS_Name', {rules: [{ required: true, message: '请输入归档范围' }]} ]" />
        </a-form-item>
        <a-form-item label="对应保管期限">
          <a-select v-decorator="[ 'FS_BGQX', {rules: [{ required: true, message: '请输入对应保管期限' }]} ]">
            <a-select-option value="1">永久</a-select-option>
            <a-select-option value="2">定期30年</a-select-option>
            <a-select-option value="3">定期10年</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="关键词">
          <a-input v-decorator="[ 'FS_KeyWord' ]" />
        </a-form-item>
        <a-form-item label="代码">
          <a-input v-decorator="[ 'FS_Code' ]" />
        </a-form-item>
        <a-form-item label="是否默认展示">
          <a-checkbox size="small" v-decorator="[ 'FS_IsExpanded', { valuePropName: 'checked', initialValue: true } ]" />
        </a-form-item>
        <a-form-item label="备注">
          <a-input type="textarea" v-decorator="[ 'FS_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
export default {
  name: 'SaveFile',
  components: {
  },
  data () {
    return {
      options1: [{ // 全宗树
        value: '选项1',
        label: '研发中心测试全宗'
      }],
      options2: [{ // 门类树
        value: '1',
        label: '诉讼档案'
      }, {
        value: '2',
        label: '影视档案'
      }, {
        value: '3',
        label: '科研档案'
      }, {
        value: '4',
        label: '党群档案'
      }, {
        value: '5',
        label: '数据汇总档案'
      }],
      saveTableData: [ // 归档范围和保管期限表格数据
        {
          FS_Order: '1',
          FS_Name: '行政许可决定书，行政许可证件',
          FS_BGQX: '永久',
          FS_Remark: '测试数据1'
        },
        {
          FS_Order: '2',
          FS_Name: '行政许可申请书',
          FS_BGQX: '30年',
          FS_Remark: '测试数据2'
        }
      ],
      saveColumns: [ // 归档范围和保管期限表头数据
        {
          title: '顺序号',
          field: 'FS_Order'
        },
        {
          title: '归档范围',
          field: 'FS_Name'
        },
        {
          title: '对应保管期限',
          field: 'FS_BGQX'
        },
        {
          title: '备注',
          field: 'FS_Remark'
        }
      ],
      modalTitle: '', // 归档范围和保管期限弹框标题
      dialogFormVisible: false, // 归档范围和保管期限弹框是否显示
      form: this.$form.createForm(this)
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 归档范围和保管期限增删改事件
    clickButton (val, row) {
      switch (val) {
        case 'add':
          this.modalTitle = '一级新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'addChild':
          this.modalTitle = '子级新增'
          this.dialogFormVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalTitle = '路径编辑'
          this.dialogFormVisible = true
          this.$nextTick(() => { // 表单赋值
            this.form.setFieldsValue(pick(row, ['FS_Order', 'FS_Name', 'FS_BGQX', 'FS_KeyWord', 'FS_Code', 'FS_IsExpanded', 'FS_Remark']))
          })
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.save-file {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
}
</style>
